<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>原料客户档案编辑</title>
    {% include 'system/common/header.html' %}
</head>
<body>
<form class="layui-form" action="" lay-filter="myForm">
    <div class="mainBox">
        <div class="main-container">
            <div class="main-container">
                <div class="layui-card-body">
                    <div class="layui-tab layui-tab-brief">
                         <ul class="layui-tab-title">
                        <li class="layui-this" id="tab_li_1">客户信息</li>
                             <li>其他信息</li>
                             <li>仓库信息</li>
                        <li>开票信息</li>

                              <li id="tab_li_5" >资质信息</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show " id="tab_first">
                                <div class="layui-form-item layui-hide">
                                    <label class="layui-form-label">编号</label>
                                    <div class="layui-input-block">
                                        <input type="text" value="{{ info.id }}" name="id" lay-verify="title"
                                               autocomplete="off" placeholder="请输入标题" class="layui-input" >
                                    </div>
                                </div>
                               <div class="layui-form-item">
                                    <label class="layui-form-label">客户名</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="客户名"  lay-verify="required"   lay-reqtext="请填写客户名" autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" value="{{ info.客户名 }}">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">身份信息</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="身份信息" lay-verify="required"  ay-reqtext="请填写供应商身份信息" autocomplete="off" placeholder="请输入内容"
                                               class="layui-input"  value="{{ info.身份信息 }}">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">注册地址</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="注册地址"  autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" value="{{ info.注册地址 }}">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">归属类别</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="归属类别"  autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" value="{{ info.归属类别 }}" >
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">状态</label>
                                    <div class="layui-input-block">
                                        <input type="radio" {% if info.状态 == 1 %} } checked{% endif %} name="状态" value="1"
                                               title="开启">
                                        <input type="radio" {% if info.状态 == 0 %} } checked{% endif %} name="状态" value="0"
                                               title="关闭">
                                    </div>
                                </div>



                                <div class="layui-form-item">
                                    <label class="layui-form-label">备注</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="备注"  autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" value="{{ info.备注 }}">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">联系人</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="联系人"  autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" value="{{ info.联系人 }}">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">联系电话</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="联系电话" lay-verify="phone" autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" value="{{ info.联系电话 }}">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">最后一次审计日期</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="最后一次审计日期" lay-verify="date" autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" value="" value="{{ info.最后一次审计日期 }}">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">有效期至</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="有效期至" lay-verify="required|date"  autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" value="{{ info.有效期至 }}">
                                    </div>
                                </div>


                                <div class="layui-form-item">
                                    <label class="layui-form-label">审计周期</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="审计周期" lay-verify="required|number" autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" value="{{ info.审计周期 }}">
                                    </div>
                                </div>

                            </div>
                            <div class="layui-tab-item">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">仓库名称</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="仓库名称"  autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" value="{{ info.仓库名称 }}">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">仓库地址</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="仓库地址"  autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" value="{{ info.仓库地址 }}">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">仓库联系人</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="仓库联系人"  autocomplete="off" placeholder="请输入内容"
                                               class="layui-input"value="{{ info.仓库联系人 }}" >
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">仓库联系电话</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="仓库联系电话" lay-verify="phone" autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" value="{{ info.仓库联系电话 }}">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">仓库名称2</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="仓库名称2"  autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" value="{{ info.仓库名称2 }}">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">仓库地址2</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="仓库地址2"  autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" value="{{ info.仓库地址2 }}" >
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">仓库联系人2</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="仓库联系人2"  autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" value="{{ info.仓库联系人2 }}">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">仓库联系电话2</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="仓库联系电话2" lay-verify="phone" autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" value="{{ info.仓库联系电话2 }}">
                                    </div>
                                </div>



                            </div>
                            <div class="layui-tab-item">
                                    <div class="layui-form-item">
                                    <label class="layui-form-label">邮箱</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="邮箱" lay-verify="email" autocomplete="off" placeholder="请输入内容"
                                               class="layui-input" value="{{ info.邮箱 }}" >
                                    </div>
                                   </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">企业网址</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="企业网址" lay-verify="url" autocomplete="off" placeholder="请输入内容"
                                                   class="layui-input" value="{{ info.企业网址 }}">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">开户行</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="开户行"  autocomplete="off" placeholder="请输入内容"
                                                   class="layui-input" value="{{ info.开户行 }}">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">收款单位</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="收款单位"  autocomplete="off" placeholder="请输入内容"
                                                   class="layui-input" value="{{ info.收款单位 }}">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">账号</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="账号"  autocomplete="off" placeholder="请输入内容"
                                                   class="layui-input" value="{{ info.账号 }}" >
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">质保体系评估结果</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="质保体系评估结果"  autocomplete="off" placeholder="请输入内容"
                                                   class="layui-input" value="{{ info.质保体系评估结果 }}">
                                        </div>
                                    </div>
                            </div>

                            <div class="layui-tab-item " id="tab_files" >
                               <div class="layui-upload">
                                      <button type="button" class="layui-btn layui-btn-normal" id="ID-upload-files">选择多文件</button>

                                      <div class="layui-upload-list">

                                        <table class="layui-table" id="uplord-table">

                                          <colgroup>

                                            <col style="min-width: 100px;" >

                                            <col width="150">
                                              <col width="150">
                                              <col width="150">

                                            <col width="260">

                                            <col width="150">

                                          </colgroup>

                                          <thead>

                                            <th>文件名</th>

                                            <th>大小</th>
                                            <th>有效期至</th>
                                            <th>状态</th>

                                            <th>上传进度</th>

                                            <th>操作</th>

                                          </thead>

                                          <tbody id="ID-upload-files-list"></tbody>

                                        </table>

                                      </div>
                            </div>
                                <hr class="layui-border-green">
                                <span class="title">已上传附件信息</span>
                                <div class="layui-card-body">
                                <table id="file-table" lay-filter="file-table"></table>

                            </div>
                        </div>
                        </div>
                   </div>
                </div>





            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
                    lay-filter="user-update" id="user-save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="pear-btn pear-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>

{% raw %}

<script type="text/html" id="dict-type-enable">
    <input type="checkbox" value="{{ d.id }}" lay-skin="switch" lay-text="在用|停用" lay-filter="dict-type-enable"
            {{ "{{# if(d.状态==1){ }} checked {{# } }}" }}>

</script>
<script type="text/html" id="user-createTime">
    {{layui.util.toDateString(d.有效期至,  "yyyy-MM-dd")}}
</script>

<script type="text/html" id="file-bar">
    <button type="button" class="pear-btn pear-btn-primary pear-btn-sm" lay-event="file_edit"><i class="layui-icon layui-icon-edit"></i>
    </button>
    <button type="button" class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i>
    </button>
    <button type="button" class="pear-btn pear-btn-warming pear-btn-sm" lay-event="downlord">

        <i class="layui-icon layui-icon-download-circle"></i>
    </button>
</script>

{% endraw %}
{% include 'system/common/footer.html' %}
<script>
    layui.use(['form', 'jquery', 'dtree', 'table'], function () {
        let form = layui.form
        let $ = layui.jquery
        let dtree = layui.dtree
        var laydate = layui.laydate;

          var upload = layui.upload;
            var element = layui.element;
            var table = layui.table;
            var layer = layui.layer;

            var lordfiles=[]
              // 渲染
             laydate.render({
                elem: '#ID-laydate-demo'
              });






            // 表格数据
        let cols = [
            [

                {title: '文件名', field: '文件名', align: 'center', width: 360},
                {title: '大小', field: '大小', align: 'center' , width: 100},
                {title: '有效期至', field: '有效期至',templet: '#user-createTime', align: 'center' , width: 100},


                { title: '状态', field: '状态', align: 'center', templet: '#dict-type-enable', width: 100 },

                {title: '操作', toolbar: '#file-bar', align: 'center', width: 180}
            ]
        ]

        // 渲染表格数据
        table.render({
            elem: '#file-table',
            id:'file-table',
            url: '/customer/raw/yp/file/data',
            method:'get',
            where:{id:'{{ info.id }}'},
            page: false,
            cols: cols,
            skin: 'line',
            title:'dhi',
            height: 'full-148',
            toolbar: '#user-toolbar', /*工具栏*/
            text: {none: '暂无附件信息'},
             defaultToolbar: [{layEvent: 'refresh', icon: 'layui-icon-refresh'}, 'filter', 'print', 'exports'] /*默认工具栏*/
        })
        window.editData = function (obj) {
                {#alert('edit')#}
                // 注：parent 是 JS 自带的全局对象，可用于操作父页面
                {#var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引#}

                parent.layer.open({
                type: 2,
                title: '修改',
                shade: 0.1,
                area: ['80%', '80%'],
                content: '/customer/raw/yp/edit/file/?dataId=' + obj.data['id'],
                    end: function(){

                        table.reload('file-table')

                      }

                })



        }

        window.removeData = function (obj) {
          layer.confirm('确定要删除该字典值', { icon: 3, title: '提示' }, function (index) {
            layer.close(index)
            let loading = layer.load()
            $.ajax({
              url: '/customer/raw/yp/file/remove/' + obj.data['id'],
              dataType: 'json',
              type: 'delete',
              success: function (result) {
                layer.close(loading)
                  table.reload('file-table')
                if (result.success) {
                  popup.success(result.msg, function () {
                    obj.del()

                  })

                } else {
                  popup.failure(result.msg)
                }
              }
            })
          })
        }
        window.downlordData = function (obj) {

          window.location.href = '/_uploads/customerRawYp/'+obj.data['文件名']

    }
        window.refresh = function (param) {
            table.reload('file-table', {where: param})
        }
        table.on('tool(file-table)', function (obj) {
          if (obj.event === 'remove') {
            window.removeData(obj)
          } else if (obj.event === 'file_edit') {

            window.editData(obj)
          }  else if (obj.event === 'downlord') {
            window.downlordData(obj)
          }
        })
        table.on('toolbar(file-table)', function (obj) {
            if (obj.event === 'add') {
                window.add()
            } else if (obj.event === 'refresh') {
                window.refresh()
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj)
            }
        })
        form.on('switch(dict-type-enable)', function (obj) {
              let operate
              if (obj.elem.checked) {
                operate = 'enable'
              } else {
                operate = 'disable'
              }
              let loading = layer.load()

              $.ajax({
                url: '/customer/raw/yp/file/' + operate,
                data: JSON.stringify({ 'dataId': this.value }),
                dataType: 'json',
                contentType: 'application/json',
                type: 'put',
                success: function (result) {
                  layer.close(loading)
                  if (result.success) {
                    popup.success(result.msg)
                  } else {
                    popup.failure(result.msg)
                  }
                }
              })
            })
        form.on('submit(user-update)', function (data) {
            var rowCount = $('#uplord-table tbody tr').length;
            if (rowCount === 0) {

                $.ajax({
                url: '/customer/raw/yp/update',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'put',
                success: function (result) {
                    if (result.success) {
                        layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name))//关闭当前页
                            parent.layui.table.reload('user-table')
                        })
                    } else {
                        layer.msg(result.msg, {icon: 2, time: 6000})
                    }
                }
            })
            }

            return false
        })

        // 制作多文件上传表格

        var uploadListIns = upload.render({
            elem: '#ID-upload-files',
            elemList: $('#ID-upload-files-list'), // 列表元素对象
            url: "{{ url_for('customer.raw.upload_api') }}", // 实际使用时改成您自己的上传接口即可。

            accept: 'file',
            multiple: true,
            unified:true,//多文件只请求一次
            number: 3,//最大上传量
            auto: false,
            bindAction: '#user-save',
            choose: function(obj){

              var that = this;
              var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列

              // 读取本地文件
              obj.preview(function(index, file, result){
                var tr = $(['<tr id="upload-'+ index +'">',
                  '<td>'+ file.name +'</td>',
                  '<td>'+ (file.size/1024).toFixed(1) +'kb</td>',

                    '<td><div><input type="text" name="过期日期" lay-verify="required|date" autocomplete="off" placeholder="yyyy-MM-dd" class="layui-input" id="ID-laydate-demo" ></div></td>',

                 '<td><div>  <input type="checkbox" name="CCC" title="在用|停用" lay-skin="switch" checked> </div></td>',
                  '<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>',
                  '<td>',
                    '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
                    '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',

                  '</td>',
                '</tr>'].join(''));


                // 单个重传
                tr.find('.demo-reload').on('click', function(){
                  obj.upload(index, file);
                });

                // 删除
                tr.find('.demo-delete').on('click', function(){
                  delete files[index]; // 删除对应的文件
                  tr.remove(); // 删除表格行

                  // 清空 input file 值，以免删除后出现同名文件不可选
                  uploadListIns.config.elem.next()[0].value = '';
                });



                that.elemList.append(tr);
                element.render('progress'); // 渲染新加的进度条组件

                laydate.render({
                        elem: '#ID-laydate-demo'
                      });
                 // 重新渲染表单元素
                form.render('checkbox');

              });

            },

            done: function(res, index, upload){ // 成功的回调
                alert(JSON.stringify(res))
                {#alert(JSON.stringify(index))#}
                {#alert(JSON.stringify(upload))#}

              var that = this;
              // if(res.code == 0){ // 上传成功
                var tr = that.elemList.find('tr#upload-'+ index)
                var tds = tr.children();
                tds.eq(5).html(''); // 清空操作
                tds.eq(0).html(res.data.filename)
                lordfiles.push(Object.assign(res, {date: tds.eq(2).find('input').val()}, {state: tds.eq(3).text()}))
                delete this.files[index]; // 删除文件队列已经上传成功的文件
                return;

              //}

              this.error(index, upload);
            },

            allDone: function(obj){ // 多文件上传完毕后的状态回调



                console.log(JSON.stringify(lordfiles))
                // 获取表单其他数据
                  var formData = form.val('myForm');
                    {#alert(JSON.stringify(formData))#}



                    // 将文件上传结果和表单数据合并
                  var allData = Object.assign({}, formData, {fileInfo: lordfiles});
                  $.ajax({
                    url: '/customer/raw/yp/update',
                    data: JSON.stringify(allData),
                    dataType: 'json',
                    contentType: 'application/json',
                    type: 'put',
                    success: function (result) {
                      if (result.success) {
                        layer.msg(result.msg, { icon: 1, time: 1000 }, function () {
                          parent.layer.close(parent.layer.getFrameIndex(window.name))//关闭当前页
                          parent.layui.table.reload('user-table')
                        })
                      } else {
                        layer.msg(result.msg, { icon: 2, time: 5000 })
                      }
                    }
                  })
                  return false
            },
            before: function(obj){ // obj 参数同 choose
                {#return true#}

                // 获取表单其他数据
                var isValid = form.validate('.layui-input');  // 主动触发验证，v2.7.0 新增

                // 验证通过
                if(isValid) {
                    return true
                }else{

                    return false
                }
            },
            error: function(index, upload){ // 错误回调
              var that = this;
              var tr = that.elemList.find('tr#upload-'+ index);
              var tds = tr.children();
               // 显示重传
              tds.eq(5).find('.demo-reload').removeClass('layui-hide');

            },

            progress: function(n, elem, e, index){ // 注意：index 参数为 layui 2.6.6 新增
              element.progress('progress-demo-'+ index, n + '%'); // 执行进度条。n 即为返回的进度百分比
            }

  });
    })
</script>
</body>
</html>